<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>销售员管理</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="showSalesmanCreateForm=true">新增销售员</el-button>
		</div>
		<el-table
			:data="salesmanListData"
			style="width: 100%">
			<el-table-column label="销售员id">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.salesmanId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="销售员名">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.salesmanName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="销售员性别">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.salesmanSex == 0">男</el-tag>
					<el-tag type="warning" v-if="scope.row.salesmanSex == 1">女</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="联系方式">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.salesmanPhone }}</span>
				</template>
			</el-table-column>
			<el-table-column label="地址">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.salesmanAddress }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="getsalesmanInfo(scope.$index, scope.row)">修改</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="salesmanNumber">
		</el-pagination>
		<!-- 销售员修改抽屉 -->
		<el-drawer
			size="50vw"
			:before-close="beforeUpdateFormClose"
			:visible.sync="showSalesmanInfoForm"
			direction="rtl">
			<salesman-update-form :salesmanUpdateData="salesmanInfo"/>
		</el-drawer>
		<!-- 销售员创建抽屉 -->
		<el-drawer
			size="50vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showSalesmanCreateForm"
			direction="btt">
			<salesman-create-form/>
		</el-drawer>
	</el-card>
</template>

<script>
import { salesmanList,salesmanSearch,salesmanDelete } from '@/api/sale'
import SalesmanCreateForm from './Drawer/SalesmanCreateForm.vue'
import SalesmanUpdateForm from './Drawer/SalesmanUpdateForm.vue'
	export default {
		name: 'Salesman',
		data() {
			return {
				//总记录数
				salesmanNumber: 0,
				// 获取销售员列表分页参数
				salesmanListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 销售员列表
				salesmanListData: [],
				// 显示销售员创建抽屉
				showSalesmanCreateForm: false,
				// 显示销售员修改抽屉
				showSalesmanInfoForm: false,
				// 销售员信息
				salesmanInfo: {}
			}
		},
		props: {
			// 获取父组件参数
		},
		components: {
			SalesmanCreateForm,
			SalesmanUpdateForm
		},
		methods:{
			//销售员删除
			handleDelete(index, row){
				salesmanDelete({salesmanId: row.salesmanId}).then(res => {
					this.getSalesmanList()
				})
			},
			// 改变页码
			handleCurrentChange(val) {
				this.salesmanListParam.startIndex = val - 1
				this.getSalesmanList()
			},
			// 获取销售员列表
			getSalesmanList(){
				salesmanList(this.salesmanListParam).then(res => {
					console.log(res.data);
					this.salesmanListData = res.data.salesmanList
					this.salesmanNumber = res.data.total
				})
			},
			// 修改销售员抽屉关闭前
			beforeUpdateFormClose(){
				this.getSalesmanList()
				this.showSalesmanInfoForm = false
			},
			// 创建销售员抽屉关闭前
			beforeCreateFormClose(){
				this.getSalesmanList()
				this.showSalesmanCreateForm = false
			},
			// 获取销售员信息
			getsalesmanInfo(index, row){
				salesmanSearch({salesmanId: row.salesmanId}).then(res => {
					this.salesmanInfo = res.data.salesman	
					console.log(this.salesmanInfo);
					this.showSalesmanInfoForm = true
				})
			}
		},
		computed:{
				//计算属性
				
		},
		watch:{
				//监听属性
		},
		created() {
			this.getSalesmanList()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>